﻿
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../../lib/jCurveCarousel.min.js"></script>
    <style>
            
    .barcontainer > img
    {
        height: 175px;
        width: 100px;
    }
    
    .baseleft
    {
        height: 0px;
        width: 0px;
        background-color:#fff;
        margin-top: 140px;
        margin-left: -1px;
        z-index: 1000;
        position: absolute;
    }
    
    .baseright
    {
        height: 30px;
        width: 30px;
        background-color: #fff;
        margin-top: -30px;
        margin-left: 71px;
        z-index: 1000;
        position: absolute;
    }
    
    .barbase
    {
        margin-top:-55px; 
        margin-left:-5px;
    }
    
    .barbase p  
    {
        float:left; 
        margin-top:0px; 
    }
    .label
    {
        text-align:center;
        font-weight:bold;
    }
    </style>
</head>
<body>

<script type="text/javascript">

    window.carousel = new Carousel();
    $(document).ready(function () {
        window.carousel.init({
            id: 'carousel',
            maxCount: $('#carousel_content').children('img').length, //20,
			loop:true,
            loader: function (index, direction) {
                return $([
                            '<div class="barcontainer">',
                                '<img src="' + $('#Img' + index).attr('src') + '" />',
                                '<div class="barbase"><img src="images/shadow.png" /></div>',
								'<div class="label">' + $('#Img' + index).attr('title') +'</div>',
                            '</div>'].join('')
                            );
            }
        });
    });

</script>
	<div id="carousel">
		<div class="barcontainer">
            <img src="images/yellow.png"  />
            <div class="barbase"><img src="images/shadow.png" /></div>
			<div class="label">1</div>
        </div>
        <div class="barcontainer">
            <img src="images/green.png"  />
            <div class="barbase"><img src="images/shadow.png" /></div>
			<div class="label">2</div>
        </div>
		<div class="barcontainer">
            <img src="images/yellow.png"  />
            <div class="barbase"><img src="images/shadow.png" /></div>
            <div class="label">3</div>
        </div>
        <div class="barcontainer">
            <img src="images/green.png"  />
            <div class="barbase"><img src="images/shadow.png" /></div>
			<div class="label">4</div>
        </div>
        <div class="barcontainer">
            <img src="images/yellow.png"  />
            <div class="barbase"><img src="images/shadow.png" /></div>
			<div class="label">5</div>
        </div>
        <div class="barcontainer">
            <img src="images/green.png"  />
            <div class="barbase"><img src="images/shadow.png" /></div>
			<div class="label">6</div>
        </div>
        <div class="barcontainer">
            <img src="images/yellow.png"  />
            <div class="barbase"><img src="images/shadow.png" /></div>
			<div class="label">7</div>
        </div>
	</div>

    <div id="carousel_content" style="display:none;">
        <img id="Img1" title="1" src="images/yellow.png" />
        <img id="Img2" title="2" src="images/green.png" />
        <img id="Img3" title="3" src="images/yellow.png" />
        <img id="Img4" title="4" src="images/green.png" />
        <img id="Img5" title="5" src="images/yellow.png" />
        <img id="Img6" title="6" src="images/green.png" />
        <img id="Img7" title="7" src="images/yellow.png" />
        <img id="Img8" title="8" src="images/green.png" />
        <img id="Img9" title="9" src="images/yellow.png" />
        <img id="Img10" title="10" src="images/green.png" />
        <img id="Img11" title="11" src="images/yellow.png" />
        <img id="Img12" title="12" src="images/green.png" />
        <img id="Img13" title="13" src="images/yellow.png" />
        <img id="Img14" title="14" src="images/green.png" />
        <img id="Img15" title="15" src="images/yellow.png" />
        <img id="Img16" title="16" src="images/green.png" />
        <img id="Img17" title="17" src="images/yellow.png" />
        <img id="Img18" title="18" src="images/green.png" />
        <img id="Img19" title="19" src="images/yellow.png" />
        <img id="Img20" title="20" src="images/green.png" />
    </div>
</body>
</html>
